<template>
	<view class="content">
		<view class="nonum">忘记密码</view>
		<view class="loding">修改密码...</view>
		<view class="login_form">
			<view class="password">
				<view class="password_title">手机号</view>
				<input type="number" maxlength="11" value="" v-model="mobile"/>
			</view>
			<view class="password">
				<view class="password_title">验证码</view>
				<view class="yzm">
					<input type="number" value="" maxlength="4" v-model="captcha"/>
					<view class="yzmm" v-if="show" @click="fasong()">验证码</view>
					<view class="yzmm" v-else>{{payRepeat}}</view>
				</view>
			</view>
			<view class="password">
				<view class="password_title">设置密码</view>
				<input type="password" value="" minlength="6" maxlength="18" v-model="password"/>
			</view>
			<view class="password">
				<view class="password_title">重复密码</view>
				<input type="password" value="" minlength="6" maxlength="18" v-model="password1"/>
			</view>
		</view>
		<view class="denglu" @click="baocun()">保存</view>
		<view class="zhuce">我有账号？  <text @click="login()">立即登录</text></view>
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';	
	export default {
		data() {
			return {
				show:true,
				payRepeat: '60秒后重新发送',
				mobile:'',
				captcha:'',
				password:'',
				password1:'',
			}
		},
		onLoad() {

		},
		methods: { 
			baocun(){
				//找回密码
				var _this = this
				if(_this.mobile ==''){
					getdata.shou('请输入手机号')
				}else if(getdata.checkMobile(_this.mobile) == false){
					getdata.shou('手机号格式不正确')
				}else if(_this.captcha.length == 0){
					getdata.shou('请输入验证码')
				}else if(_this.captcha.length != 4){
					getdata.shou('验证码为4位')
				}else if(_this.password == ''){
					getdata.shou('请输入密码')
				}else if(getdata.kongbai(_this.password) == false){
					getdata.shou('密码格式不正确')
				}else if(_this.password1 == ''){
					getdata.shou('请再次输入密码')
				}else if(_this.password1 != _this.password){
					getdata.shou('两次输入密码不一致')
				}else{
					var data = {
						mobile:_this.mobile,
						captcha:_this.captcha,
						newpassword:_this.password,
					}
					uni.showLoading({
					    title: '保存中'
					});
					uni.request({
						url: getdata.websiteUrl + '/user/resetpwd',
						data: data,
						dataType: 'json',
						method: 'POST',
						header:{'content-type': "application/x-www-form-urlencoded"},
						success: res => {
							console.log(res)
							uni.hideLoading();
							if (res.data.code == 1) {
								getdata.shou(res.data.msg);
								setTimeout(() => {
									uni.redirectTo({
										url: './login'
									})    
								},2000)
							}else{
								getdata.shou(res.data.msg);
							} 
						},
						fail: err => {
							uni.hideLoading();
							getdata.shou('服务器断开链接')
						}
					});
				}
			},
			login(){
				uni.reLaunch({
					url: 'login'
				});
			},
			fasong(){
				//发送短信验证码
				var _this = this
				if(getdata.checkMobile(_this.mobile) == false){
					getdata.shou('手机号格式不正确');
				}else{
					var retime = 60;
					var data = {
						mobile:_this.mobile,
						event:'resetpwd'
					}
					uni.request({
						url: getdata.websiteUrl + '/sms/send',
						data:data,
						method: 'POST',
						header:{'content-type': "application/x-www-form-urlencoded"},
						dataType:'json',
						success: res => {
							console.log(res)
							if(res.data.code == 1){ 
								getdata.shou(msg)
								var reyzm = setInterval(function() {	
									retime--;
									_this.show = false;
									_this.payRepeat = retime + '秒后重发';
									if (retime == 0) {
										retime = 60;
										clearInterval(reyzm);
										_this.show = true;
									}
								}, 1000);
								_this.captcha = res.data.data
							}else{
								getdata.shou(res.data.msg);
							}
						},
						fail: err => {
							getdata.shou('服务器断开链接')
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	box-sizing: border-box;
	padding: 0 75rpx ;
	.nonum{
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #010101;
		margin-top: 80rpx;
	}
	.loding{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ABB4C6;
		text-align: center;
		margin-top: 50rpx;
	}
	.login_form{
		margin-top: 100rpx;
		width: 100%;
		.password{
			width: 100%;
			border-bottom: 2rpx solid #E0E0E0;
			margin-bottom: 40rpx;
			.password_title{
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #8D8D97;
				display: flex;
				align-items: center;
				
			}
			.yzm{
				display: flex;
				justify-content: space-between;
				input{
					flex: 1;
					height: 80rpx;
				}
				.yzmm{
					width: 170rpx;
					height: 70rpx;
					line-height: 70rpx;
					background: #1578F2;
					box-shadow: 0px 3rpx 15rpx 1rpx rgba(21, 120, 242, 0.81);
					border-radius: 35rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
					text-align: center;
				}
			}
			input{
				width: 100%;
				height: 70rpx;
			}
		}
	}
}	
.denglu{
	width: 360rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #1578F2;
	box-shadow: 0px 3rpx 15rpx 1rpx rgba(21, 120, 242, 0.81);
	border-radius: 40rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	color: #ffffff;
	text-align: center;
	margin: 80rpx auto 0;
}	
.zhuce{
	font-size: 24rpx;
	font-family: PingFang SC;
	color: #8D8D97;
	margin: 90rpx auto 0;
	text-align: center;
	text{
		color: #1578F2;
	}
}
</style>
